﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>社区好生活</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/ydui.css?v=1.1.4" rel="stylesheet" />
    <script src="../js/ydui.flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/all.css?v=20180302"/>
    <style type="text/css">
        .scrollcontent {display: none;}
        .scrolltab-content{padding-left:0;}
        .swiper-container{
        	width: 100%;
        	height: 100%;
        }
    </style>
</head>

<body ms-controller="classify" class="ms-controller">
    <div class="g-flexview">
        <div class="classify-input">
            <p class="iconfont icon-back1" onclick="history.back()"></p>
            <input type="text" class="iconfont" placeholder="&#xe6cb;输入搜索内容" id="" />
        </div>
        <p style="font-size: .25rem;color:#ff8a00;padding:0.2rem 0.2rem;background-color:#fff;" ms-if="@ctype==2">
            <i class="iconfont icon-xuanzhong"></i>
            每天21点截止当天预订，第二天配送。<br />
            <i class="iconfont icon-xuanzhong"></i>
            满36元以上免运费，不足运费3元。<br />
            <i class="iconfont icon-xuanzhong"></i>
            如果不能10点前接收配送，请勿定叶菜类单品。
        </p>
        <section class="g-scrollview">
           
            <div class="m-scrolltab">
                <div class="scrolltab-nav">
                    <div ms-for="el in @data">
                        <a ms-class="['scrolltab-item','scrolltitle',@first==el.ID && 'srt']" ms-on-tap="@list($event,el,'')">
                            <div class="scrolltab-title">{{el.TypeName}}</div>
                        </a>
                        <div ms-visible="@first==el.ID" ms-class="['scrolltab-item','scrollcontent',@second==sel.ID && 'crt']" ms-for="sel in el.SubItem" ms-on-tap="@list($event,el,sel)">
                            <div class="scrolltab-title">{{sel.TypeName}}</div>
                        </div>
                    </div>
                </div>
                <div class="scrolltab-content" id="allquestion">
                    <p style="background-color:#f4f4f4;font-size: .25rem;color:#666;padding:0.1rem 0.2rem;" ms-if="@SubTitle">
                        {{@SubTitle}}({{@total}})
                    </p>
                    <div class="scrolltab-content-item classifylist">
                        
                        <div class="ifylist-list clearfix" ms-for="($index,el) in @ListData">
                            <div>
                                <a class="J_Link" ms-attr="{href:'detail.html?id='+el.ID,'data-page':Math.ceil(($index+1)/10)}"><img ms-attr="{'src':ComFunJS.FilePath(el.ImgUrl,'/135/120')}"></a>
                                <div class="list-content">
                                    <p class="title">{{el.Title}}</p>
                                    <p class="yueshou">{{el.Desp}}</p>
                                    <p class="price"><span>¥</span>{{el.Price1}}
                                       <span ms-if="el.Point>0" style="padding-left:5px;">可用存款:¥{{el.Point}}</span>
                                    </p>
                                    <p class="price" ms-if="el.RePoint>0">
                                        <span>返:¥</span>{{el.RePoint}}
                                    </p>
                                </div>
                                <p class="border-content iconfont icon-jia2" ms-on-tap="@memberadd(el)"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="jui-secbalance">
            <p ms-on-click="@brouceIn" ms-class="['gouwuche','iconfont','icon-03f',@SumQty!='0'&&'active']"><i ms-if="@SumQty!='0'">{{@SumQty}}</i></p>
            <p class="text"><i ms-if="@SumSelQty=='0'">购物车是空的</i><span ms-if="@SumSelQty!='0'">￥{{@SumPrice}}</span></p>
            <a ms-class="@SumSelQty!='0'&&'active'" ms-on-tap="@balance">去结算</a>
        </div>
    
    <div class="bereturn_popup">
        <div class="_popup_content">
            <div class="empty clearfix">
                <div class="crile fl">
                    <label class="cell-right" style="height: .82rem;position: relative;">
                        <input type="checkbox" value="1" name="quan" class="cell-input" id="selectall" ms-on-tap="@selectall($event)" style="width: 100%;left: 0;">
                        <i class="cell-checkbox-icon"></i>
                    </label>
                </div>
                <p class="fl">全选<span ms-if="@SumSelQty>0">(已选择{{@SumSelQty}}件)</span></p>
                <p class="fr" ms-on-click="@empty"><span class="iconfont icon-delete1"></span>清空购物车</p>
            </div>
            <div ms-class="[@productlist.length>=3&&'changehight']">
                <div class="shopping-list clearfix"  ms-for="el in @productlist">
                    <div class="crile fl">
                        <label class="cell-right">
                            <input type="checkbox"  name="checkbox" class="cell-input" ms-duplex-checked="el.ISSel" data-duplex-changed="@membersub" ms-attr="{id:el.ID}" style="width: 100%;left: 0;">
                            <i class="cell-checkbox-icon"></i>
                        </label>
                    </div>
                    <div class="listcon fr">
                        <img ms-attr="{'src':ComFunJS.FilePath(el.ImgUrl,'/144/144')}">
                        <p>{{el.Title}}</p>
                        <h1>{{el.Desp}}</h1>
                        <h2>¥{{el.Price1}}<span style="padding-left:5px;" ms-if="el.Point>0">可用存款:¥{{el.Point}}</span></h2>
                        <div class="bonus">
                            <span ms-on-tap="@Add($event,el,'minus')">－</span>
                            <p>{{el.Qty}}</p>
                            <span ms-on-tap="@Add($event,el,'plus')">+</span>
                        </div>
                    </div>
        		</div>
            </div>
        </div>
        <div class="black_dark">

        </div>
    </div>
</div>
    <script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/ydui.js"></script>
    <script src="../js/avalon.mobile.min.js"></script>
    <script src="../js/gouwu.js?v=20180202"></script>
    <script src="../js/ComFunJS.js?v=20180331"></script>
    
    <script type="text/javascript">   	
        function click() {
            //$('.scrolltitle').click(function () {
            //    $(this).parent().find('.scrollcontent').slideToggle().parent().siblings('.scrollcontent').slideUp();
            //    $(this).removeClass('crt');
            //    $(this).parent().find('.scrollcontent').eq(0).addClass('crt').siblings('.scrollcontent').removeClass('crt');
            //    $('.scrollcontent').click(function () {
            //        $(this).addClass('crt').siblings().removeClass('crt');
            //    })
            //})
            $('.black_dark').click(function () {
                $('.bereturn_popup').removeClass('brouce-in');
            })
        }
        var model = avalon.define({
            $id: 'classify',
            data: [],
            pageindex: 1,
            ListData: [],
            member: 0,
            productlist: [],
            SumPrice: 0,
            SumQty: 0,
            SumSelQty: 0,
            ctype: ComFunJS.getQueryString("ctype", "1"),
            first: "",
            second: "",
            total: 0,
            SubTitle:"",
            get: function () {
                $.getJSON("/api/base/cate/listall/1?ctype=" + model.ctype, function (r) {
                    model.data = r.result;
                    model.first = r.result[0].ID;
                    model.second = r.result[0].SubItem[0].ID;
                    model.SubTitle = r.result[0].SubItem[0].TypeName;
                    click();
                    init();
                    $(".scrolltitle").eq(0).parent().find(".scrollcontent").css("display", "block");
                })
            },
            brouceIn: function () {
                if (model.productlist.length > 0) {
                    $('.bereturn_popup').addClass('brouce-in');
                }
            },
            gettrolleylist: function () {
                model.productlist = cart.getProductList(model.ctype);
                var qty = cart.getProductQty(model.ctype);
                model.SumPrice = qty.Price1;
                model.SumQty = qty.Qty1;
                model.SumSelQty = qty.Qty2;
            },
            memberadd: function (el) {
            	clickb();
            	cart.addProduct(el, model.ctype);
                model.gettrolleylist();
                
            },
            list: function (event, el1, el2) {
                if (el1.ID != model.first) {
                    model.first = el1.ID;
                    model.list(null, el1, el1.SubItem[0]);

                }
                if (el2) {
                    model.second = el2.ID;
                    model.SubTitle = el2.TypeName;
                    init();
                }
            },
            selectall: function (event) {
                if ($('#selectall').is(':checked')) {
                    $(".shopping-list :checkbox").prop("checked", true);;
                    cart.updateProductSelAll(model.ctype, true);
                } else {
                    $(".shopping-list :checkbox").prop("checked", false);
                    cart.updateProductSelAll(model.ctype, false);
                }
                model.gettrolleylist();
            },
            Add: function (event, el, flag) {
                if (flag == "plus") {
                    el.Qty = el.Qty + 1;
                } else if (flag == "minus") {
                    el.Qty = el.Qty - 1;
                }
                if (el.Qty < 1) {
                    cart.delProduct(el.ID);
                } else {
                    cart.updateProductQty(el.ID, el.Qty);
                }             
                model.gettrolleylist();
                if (event) {
                    event.stopPropagation();
                    event.preventDefault();
                }
            },
            balance:function(){
            	if(model.SumSelQty==0){
            		 YDUI.dialog.toast("您还没有选择商品", "none", 1000);
            	}else{
            	    window.location.href = '../order/new.html?ctype=' + model.ctype;
            	}
            },
            empty: function () {
                cart.delProduct();
                model.gettrolleylist();
            },
            membersub: function (event) {
                var issel = event.target.checked;
                var id = $(event.target).attr("id");
                cart.updateProductSel(id, issel);
                model.gettrolleylist();
                  if (event) {
                      event.stopPropagation();
                      event.preventDefault();
                  }
            },
            GetListData: function (callback) {
                $.getJSON("/api/pro/list/" + model.first + '/' + model.second + "?pageindex=" + model.pageindex, function (r) {
                    if (r.error == "") {
                        model.total = r.total;
                        typeof callback == 'function' && callback(r.result);
                    }

                })
            }
        })
        avalon.ready(function () {
            //localStorage.removeItem("shopcart1");
            model.get();
            model.gettrolleylist();     
        })

        function init() {
            model.ListData.clear();
            model.pageindex = 1;
            $('.classifylist').infiniteScroll({
                binder: '#allquestion',
                pageSize: 10,
                initLoad: true,
                backposition: true,
                jumpLink: '.J_Link',
                loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>',
                loadListFn: function () {
                    var def = $.Deferred();

                    model.GetListData(function (listArr) {
                        model.ListData.pushArray(listArr);
                        //$('.m-list').find('img').lazyLoad({ binder: '.g-scrollview' });
                        def.resolve(listArr, model.pageindex);
                        model.pageindex++;
                    })

                    return def.promise();
                },
                loadStorageListFn: function (ret, retPage) {
                    var def = $.Deferred();
                    model.pageindex = retPage;
                    ret.forEach(function (listArr) {
                        listArr.list.forEach(function (val) {
                            model.ListData.push(val);
                        });
                    });
                    model.total = model.ListData.length;
                    //$('.m-list').find('img').lazyLoad({ binder: '.g-scrollview' });
                    def.resolve();
                    return def.promise();
                }
            })

        }


    </script>
</body>
</html>
